<template>
    <div class="login-wrap">
        <!-- <h1>登录</h1> -->
        <div class="ms-login">
			<div class="ms-title">欢迎注册X+图书管理系统
                <p class="login-tips">创建一个X+管理新账号</p>
            </div>
        
			<el-form :model="param" :rules="rules" ref="login" label-width="5px" class="ms-content">
				<el-form-item prop="username">
					<el-input v-model="param.username" placeholder="请输入用户名">
						<template #prepend>
							<el-button :icon="User"></el-button>
						</template>
					</el-input>
				</el-form-item>
				<el-form-item prop="password">
					<el-input
						type="password"
						placeholder="请输入密码"
						v-model="param.password"
						@keyup.enter="submitForm(login)"
					>
						<template #prepend>
							<el-button :icon="Lock"></el-button>
						</template>
					</el-input>
				</el-form-item>
				<el-form-item prop="rePassword">
					<el-input
						type="password"
						placeholder="请再次输入密码"
						v-model="param.rePassword"
						@keyup.enter="submitForm(login)"
					>
						<template #prepend>
							<el-button :icon="Lock"></el-button>
						</template>
					</el-input>
				</el-form-item>
                <el-form-item>
                    <el-checkbox v-model="checked1" label="我同意此协议" size="large"/> 
                </el-form-item>
                <div class="login-btn">
					<el-button type="success" @click="submitForm(login)">注册</el-button>
				</div> 
				<p class="login-tips">Tips : 已经有了账号！ <router-link to="/login" style="color: rgb(13, 95, 161)">点此登录</router-link> </p>
                </el-form>
        </div>        
    </div>
</template>

<script setup>
import { ref, reactive ,onMounted} from 'vue';
import { useRouter } from 'vue-router';
import { User ,Lock} from '@element-plus/icons-vue'
// import {useUserStore} from '../stores/user'
import {loginOn} from '../api/index'
const param = reactive({
	username: '',
	password: '',
    rePassword:''
    
});
const rules= {
	username: [{required: true,message: '请输入用户名',trigger: 'blur'}],
	password: [{ required: true, message: '请输入密码', trigger: 'blur' }],
	rePassword: [{ required: true, message: '请再次输入密码', trigger: 'blur' }]
};
const login = ref(null);
const router = useRouter();
//登录验证
const  submitForm = (formEl)=>{
	if (!formEl) return;
	formEl.validate(async (valid) => {
		console.log(valid)
        /***********调用后台的登录登录验证**********/
       /*  loginOn(param).then(res=>{
            console.log('userLogin',res)
        }) */
		if(valid){
				ElMessage.success('登录成功');
				router.push('/home');		
		} else {
			ElMessage.error('登录失败');
			return false;
		}
	});
}
</script >
<style lang="less" scoped>
    .login-wrap {
        position: relative;
        width: 100%;
        height: 100%;
        background-image: url(../assets/img/rc.jpg);
        background-size: 100%;
    }
    .ms-title {
	width: 100%;
	line-height: 50px;
	text-align: center;
	font-size: 20px;
	color: #fff;
	border-bottom: 1px solid #ddd;
}
 .ms-login {
	position: absolute;
	left: 50%;
	top: 50%;
	width: 350px;
	margin: -190px 0 0 -175px;
	border-radius: 5px;
	background: rgba(0, 0, 0, 0.15);
	overflow: hidden;
}
.ms-content {
	padding: 30px 30px;
	.cover{
		width: fit-content;
		height:300px;
		background-color: aliceblue;
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%,-50%);
		z-index: 1000;
    }
}
.login-btn {
	text-align: center;
}
.login-btn button {
	width: 100%;
	height: 36px;
	margin-bottom: 10px;
}
.login-tips {
	font-size: 12px;
	line-height: 30px;
	color: #fff;
} 

</style>